<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../../layuimini-2/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../layuimini-2/css/public.css" media="all">
    <!--    1.引入js-->
    <script src="../../../layuimini-2/lib/echarts.min.js"></script>
    <script src="../../../layuimini-2/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <style>
        .dv{
            width: 90%;
            margin-left: 5%;
            height: 500px;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-lg12">
            <div class="dv" id="dv1"></div>
        </div>
        <div class="layui-col-lg12">
            <div class="dv" id="dv2"></div>
        </div>
    </div>
</div>
<script>
    $(function (){
        loadNumTj();
       loadtypeTj();
    })
    //1.实现学员性别人数统计 饼状图
    function loadNumTj(){
        //获取对应的标签 div
        var dv = document.getElementById('dv1');
        //完成Echarts初始化
        var chart = echarts.init(dv);
        var option = {
            title: {
                text: '物品数量统计',
                subtext: '数据来源内部系统',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: '数量',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 1, name: '男' },
                        { value: 1, name: '女' },
                        { value: 1, name: '第三者' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        chart.setOption(option);

        //请求接口 Ajax
        $.get("/api/hqmanager/mnumtj.do",(res)=>{
            option.series[0].data=res.data;
            chart.setOption(option);
        })
    }
    // //2.统计种类物品的数量 柱状图和折线图 可以自由切换
    function loadtypeTj(){
        //获取对应的标签 div
        var dv = document.getElementById('dv2');
        //完成Echarts初始化
        var chart = echarts.init(dv);
        var option = {
            title: {
                text: '物品种类数量统计',
                subtext: '数据来源内部系统',
                left: 'center'
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: { readOnly: false },
                    magicType: { type: ['line', 'bar'] },
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                data: ['博士', '硕士', '本科', '专科', '高中', '初中及以下']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [1, 1, 1, 1, 1, 1],
                    type: 'line'
                }
            ]
        };
        chart.setOption(option);

        //请求接口 Ajax
        $.get("/api/hqmanager/typetj.do",(res)=>{
            option.xAxis.data=res.data.spe;
            option.series[0].data=res.data.num;
            chart.setOption(option);
        })
    }

</script>
</body>
</html>